<template>
  <div class="app-container">
    <!--<div class="filter-container" style="display: flex">
      <el-form ref="editForm" :rules="editFormRules" :model="editForm" status-icon label-position="right"
               label-width="100px" style="width: 50%">
        <el-form-item label="账户号" prop="account">
          <el-input v-model="editForm.account" placeholder="账户号"/>
        </el-form-item>
      </el-form>
      <div style="margin-left: 30px">
        <el-button type="primary" @click="doQuery" icon="el-icon-search">查询</el-button>
      </div>
    </div>-->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#92D3FF',color:'#fff'}">

      <el-table-column align="center" min-width="100" label="账户号" prop="account"/>

      <el-table-column align="center" min-width="100" label="账户名称" prop="name"/>
      <el-table-column align="center" min-width="100" label="开户银行编码" prop="bankCode"/>
      <!--<el-table-column align="center" min-width="100" label="开户银行联行号" prop="interBankNo"/>-->
      <el-table-column align="center" min-width="100" label="开户银行名称" prop="bankName"/>
      <el-table-column align="center" min-width="100" label="账户类型" prop="accType">
        <template slot-scope="scope">
          <el-tag>{{{"0":"服务费账户","1":"代付账户"}[scope.row.accType]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100" label="是否使用" prop="used">
        <template slot-scope="scope">
          <el-tag>{{{"0":"是","1":"否"}[scope.row.used]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"
                     @click="getBalance(scope.row)">查询余额
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                @pagination="getList"/>-->
    <!-- 余额对话框 -->
    <el-dialog :visible.sync="balanceDialogVisible" title="账户余额"  width="900px" :close-on-click-modal="false">
      <el-table v-loading="balancelistLoading" :data="balancelist" element-loading-text="正在查询中。。。" border fit highlight-current-row
                :header-cell-style="{background:'#92D3FF',color:'#fff'}">
        <el-table-column fixed align="center" max-width="300" label="账户号" prop="account"/>
        <el-table-column align="center" min-width="100" label="当前余额(元)" prop="balance"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
  import {doGet, doPost} from '@/api'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  export default {
        name: "balance",
      components: {Pagination},

      data() {
          return {
            list: [],
              total: 0,
            listLoading: false,
            /*editForm: {
              account: undefined
            },
            editFormRules: {
              account: [{required: true, message: '账户号不允许为空', trigger: 'blur'}]
            },*/
            balanceDialogVisible: false,
            balancelistLoading: false,
            balancelist: [],
              listQuery: {
                  pageNum: 1,
                  pageSize: 20,
              },
          }
      },

    created() {
         this.getList()
    },

      methods: {

        /**获取数据列表 */
        getList() {
          this.listLoading = true
          doGet('account.html?op=list').then(response => {
            this.list = response.rows
            this.total = response.rows.length
            this.listLoading = false
          }).catch(response => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
        },

        // 获取余额列表
        getBalance(row) {
          this.balancelist = []
          this.balanceDialogVisible = true
          this.balancelistLoading = true
          doGet('balance.html?op=search', {account: row.account}).then(response => {
            this.balancelist = response.rows
            this.balancelistLoading = false
          }).catch(response => {
            this.balancelist = []
            this.balancelistLoading = false
            this.$notify.error({
              title: '失败',
              message: response.message
            })
          })
        },

        /*// 查询余额
        doQuery() {
          this.$refs['editForm'].validate(valid => {
            if (valid) {
              this.getList()
            }
          })
        }*/
      }
    }
</script>

<style scoped>
  .el-table thead {
    color: #333;
  }
</style>
